<template>
  <div class="detailItem">
    <video @click="change" ref="video" :src="item.video.url"></video>

    <div class="content">
      <p>{{ item.title }}</p>
    </div>
    <div class="option">
      <div class="user">
        <img :src="item.user.avatarurl" alt="" />
      </div>
      <span :class="['goodIcon',{dian:dianzan}]" @click="dianzan=!dianzan">
        <i class="iconfont icon-dianzan1" aria-hidden="true"></i>
      </span>
      
      <span class="goodCount">
        {{ dianzan?item.upCount+1:item.upCount }}
      </span>

      <span class="msgIcon">
        <i class="iconfont icon-pinglun1" aria-hidden="true"></i> 
      </span>
      <span class="megText">
        评论
      </span>

      <span class="shareIcon">
        <i class="iconfont icon-fenxiang" aria-hidden="true"></i>
      </span>
      <span class="shareText">
        分享
      </span>
    </div>
    <div class="goBack" @click="$router.back()">
      <i class="iconfont icon-fanhui" aria-hidden="true"></i>
    </div>
    <div class="playVideo" @click.stop="change">
      <i :class="['iconfont',start?'icon-24gf-pause2':'icon-bofangqi-bofang']" aria-hidden="true"></i>
    </div>
  </div>
</template>
<script>
export default {
  props: ["item"],
  data(){
    return {
      dianzan:false,
      start:false
    }
  },
  methods:{
    change(){
      this.start=!this.start;
      if(this.start){
        this.$refs.video.play();
      }else{
        this.$refs.video.pause();
      }
      
    }
  }
};
</script>
<style lang="less" scoped>
.detailItem {
  width: 100%;
  height: 667px;
  overflow: hidden;
  position: relative;
  video {
    width: 100%;
    height: 667px;
  }
  .content {
    position: absolute;
    left: 0;
    bottom: 100px;
    font-size: 18px;
    padding: 0px 20px;
    height: 20px;
    width: 300px;
    p {
      color: rgb(194, 188, 188);
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      padding-right: 20px;
    }
  }
  .option {
    position: absolute;
    right: 20px;
    top: 35%;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 15px;
    .user {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      overflow: hidden;
      background: white;
      margin-bottom: 30px;
      img {
        width: 50px;
        height: 50px;
      }
    }
    .goodIcon,.shareIcon,.msgIcon{
      width: 50px;
      height: 50px;
      border-radius: 50%;
      text-align: center;
      line-height: 50px;
      color: white;
      background: rgba(0, 0, 0, .6);
      font-size: 20px;
      i{
        font-size: 20px;
      }
      &.dian{
        font-size: 30px;
        color: red;

        i{
          font-size: 30px;
        }
      }
    }
    .goodCount,.megText,.shareText{
      color: white;
      margin-top: 10px;
      margin-bottom: 15px;
    }


  }
  .goBack{
    position: absolute;
    left: 10px;
    top: 10px;
    color: white;
    i{
      font-size: 17px;
      text-align: center;
      color: #ccc;
    }
  }
  .playVideo{
    position: absolute;
    color: white;
    // background: white;
    left: 50%;
    top: 50%;
    font-size: 60px;
    text-align: center;
    line-height: 100px;
    width: 100px;
    height: 100px;
    transform: translateX(-50%) translateY(-50%);
    transition: all 2s linear;
    opacity: 1;

    i{
      font-size: 60px;
    }
    .icon-24gf-pause2{
      animation: xiaoshi .8s linear forwards;
    }
  }
}
@keyframes xiaoshi{
  from{
    opacity: 1;
  }
  to{
    opacity: 0;
  }
}
</style>